<template>
    <div id='count'>
        <el-card :body-style="{ padding: '0px' }">
            <div slot="header">
                <span>统计分析</span>
            </div>
            <!-- card body -->
            <!-- {{this.paper_id}} -->
            <!-- 饼图 -->
            <ve-pie :data="countData"></ve-pie>
             <!-- 饼图 -->
        </el-card>
        <!-- 详细分析表单 -->
        <el-card v-for="(row,index) in countrowData" :key="'row'+index">
            <div slot="header">
                <span>{{row.data.paper_id}}</span>
            </div>
            <ul>
                <li v-for='(con,index) in row.data.content' :key="'con'+index">{{con.text}}
                    <el-tag type="primary" >{{con.answerText}}</el-tag>
                </li>
            </ul>
             <!-- 柱状图 -->
                <ve-histogram :data="row"></ve-histogram>
             <!-- 柱状图 -->
        </el-card>
        
        
    </div>
</template>
<script>
export default {
    props:['paper_id'],
    data(){
        return{
            countData:{
                columns:[],
                rows:[]
            },
            countrowData:[]
        }
    },
    created(){
        this.getCount(),
        this.getCountRow()
    },
    methods:{
        //获取饼图数据
        getCount(){
            this.$http.get('/answer/count',{
                params:{
                    paper_id:this.paper_id
                }
            }).then(result=>{
                console.log(result)
                this.countData.columns=result.data.data.columns,
                this.countData.rows=result.data.data.rows
            })
        },
       //获取详细列表数据
        getCountRow(){
            this.$http.get('/answer/countrow',{
                params:{
                    paper_id:this.paper_id
                }
            }).then(result=>{
                this.countrowData=result.data.data
            })
        } 
    }
}
</script>
<style>
.el-card{
    margin-bottom: 10px;
}
</style>

